<template>
  <div class="upload">
    <h4>文件上传</h4>
    <div style="margin-bottom:15px">
      <el-select v-model="sid" placeholder="填写文件所属科目信息">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.sid"
        >
        </el-option>
      </el-select>
    </div>
    <el-upload
      class="upload-demo"
      drag
      action=""
      multiple
      :http-request='upload'
      :before-upload="beforeupload"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">
        只能上传jpg/png文件，且不超过500kb
      </div>
    </el-upload>
    <el-button
      style="margin-left: 10px"
      size="small"
      type="success"
      @click="submitUpload"
      >点击上传</el-button
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "数学1",
          sid: 5,
        },
        {
          value: "选项2",
          label: "数学2",
          sid: 6,
        },
        {
          value: "选项3",
          label: "数学3",
          sid: 7,
        },
        {
          value: "选项4",
          label: "英语1",
          sid: 8,
        },
        {
          value: "选项5",
          label: "英语2",
          sid: 9,
        },
        {
          value: "选项6",
          label: "计算机408",
          sid: 10,
        },
        {
          value: "选项7",
          label: "法学",
          sid: 11,
        },
        {
          value: "选项8",
          label: "教育学",
          sid: 12,
        },
        {
          value: "选项9",
          label: "传媒",
          sid: 13,
        },
      ],
      fileList: null,
      sid: "",
    };
  },
  methods:{
    upload(){     
    },
    submitUpload(){
      console.log(this.fileList)
      this.$http.post('user/upload',this.fileList).then(res=>{
        console.log(res)
        if(res.data.flag==true){
          this.$message.success(res.body.message);
        }else{
          this.$message.error(res.body.message);
        }
      })
    },
    beforeupload(file){
      this.fileList=new window.FormData()
      this.fileList.append("sid",this.sid)
      this.fileList.append("uid",this.$store.state.id)
      this.fileList.append("resource",file)
    },
  }
};
</script>

<style>
.upload {
  width: 90%;
  margin: auto;
}
</style>